/*
  https://flutter.cn/docs/development/ui/layout

 */

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;

void main() {
  debugPaintSizeEnabled = true;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final String pic1 = 'images/sizing/pic1.jpg';
  final String pic2 = 'images/sizing/pic2.jpg';
  final String pic3 = 'images/sizing/pic3.jpg';

  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter layout demo'),
        ),
        // body: Center(child: buildOverflowingRow()),
        // body: Center(child: buildExpandedImages()),
        body: Center(child: buildExpandedImagesWithFlex()),
      ),
    );
  }

  Widget buildOverflowingRow() =>
      // #docregion overflowing-row
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Image.asset(pic1),
          Image.asset(pic2),
          Image.asset(pic3),
        ],
      );

  /*
    调整 widgets 大小
    当某个布局太大而超出屏幕时，受影响的边缘会出现黄色和黑色条纹图案。这里有一个行太宽的

    通过使用 Expanded widget，可以调整 widgets 的大小以适合行或列。要修复上一个图像行对其渲染框来说太宽的示例，可以用 Expanded widget 把每个图像包起来。

   */
  Widget buildExpandedImages() => Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(child: Image.asset(pic1)),
          Expanded(child: Image.asset(pic2)),
          Expanded(child: Image.asset(pic3))
        ],
      );

  //想要一个 widget 占用的空间是兄弟项的两倍。为了达到这个效果，可以使用 Expanded widget 的 flex 属性，
  // 这是一个用来确定 widget 的弹性系数的整数。默认的弹性系数为 1，以下代码将中间图像的弹性系数设置为 2：
  Widget buildExpandedImagesWithFlex() => Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(child: Image.asset(pic1)),
          Expanded(flex: 2, child: Image.asset(pic2)),
          Expanded(child: Image.asset(pic3))
        ],
      );
}
